<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>药品分类</title>
		<link rel="stylesheet" href="css/index.css">
		<script src="js/vue.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mycommon.js"></script>
	</head>
	<body>
		<div id="box1">
			<fieldset style="border: 1px solid gainsboro;margin-bottom: 4px;">
				<legend><i class="el-icon-search" style="color:#bfb6a3 ;">查询</i></legend>
				<el-form size="mini" :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="标题">
						<el-input v-model="formInline.user" placeholder="标题"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="onSubmitselect">查询</el-button>
						<el-button type="warning" @click="open">新增药品分类</el-button>
					</el-form-item>
				</el-form>
			</fieldset>


			<template style="text-align: center;">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column prop="id" label="编号">
					</el-table-column>
					<el-table-column prop="yaopinfenlei" label="药品分类">
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button type="primary" size="mini"
								@click="handle(scope.$index, scope.row)">详情</el-button>
							<el-button type="primary" size="mini"
								@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="mini" type="danger"
								@click="handleDelete(scope.$index, scope.row.id)">删除</el-button>
						</template>



				</el-table>
			</template>
			<el-pagination background layout="prev, pager, next" :total="tocal" :page-size="pagesize"
				@current-change="handleCurrentChange">
			</el-pagination>
			
			<!-- 修改药品分类 -->
			<el-dialog title="修改药品分类" :visible.sync="dialogVisibleup" width="50%">
				<el-form ref="form" :model="tableData" label-width="100px" size="mini">
					<el-form-item label="药品分类">
						<el-input v-model="tableData.id" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="药品分类">
						<el-input v-model="tableData.yaopinfenlei"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button size="mini" @click="dialogVisibleup = false">取 消</el-button>
					<el-button size="mini" type="primary" @click="onSubmitup">确定</el-button>
				</span>
			</el-dialog>


			<!-- 增加药品分类 -->
			<el-dialog title="增加药品分类" :visible.sync="dialogVisible" width="50%">

				<el-form ref="form" :model="tableDatain" label-width="100px" size="mini">
					<el-form-item label="药品分类">
						<el-input v-model="tableDatain.yaopinfenlei"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button size="mini" @click="dialogVisible = false">取 消</el-button>
					<el-button size="mini" type="primary" @click="onSubmit">确 定</el-button>
				</span>
			</el-dialog>
		</div>
		<script>
			new Vue({
				el: "#box1",
				data: {
					tableData: [{
						id: '',
						yaopinfenlei: ''
					}],
					tableDatain: {
						id: '',
						yaopinfenlei: ''
					},
					tableDataup: {
						id: '',
						yaopinfenlei: ''
					},
					formInline: {
						user: ''
					},
					id: 0,
					page: 1, //当前第几页
					tocal: 0, //总条数
					pagesize: 4, //总页数	
					dialogVisible: false,
					dialogVisibleup: false
				},
				methods: {
					handleEdit(index, row) {
						//编辑
						this.dialogVisibleup = true
						//1、根据id调用后端接口获取数据
						var that = this
						//ajax请求后端接口获取json数据
						axios.post(HTTP + "selectbyid3/", {
							"id": row.id
						}).then(function(res) {
							//alert(JSON.stringify(res))
							//2、把后端获取的这个对象填充到表单里面进行修改
							that.tableData = res.data.data.byid
						}).catch(err => {
							console.log(err)
						});
					},
					handleDelete(index, row) {
						this.id = row;
						this.del();
						this.initdata()
					},
					//删除
					del() {
						var that = this
						axios.get(HTTP + "deleteMenu2/" + this.id).then(function(res) {
							if (res.data.code == 200) {
								that.$message('删除成功');
								that.initdata()
							}
						}).catch(err => {
							console.log(err)
						});
					},
					handle(index, row) {
						this.id = row.id;

					},
					//增加药品分类
					onSubmit() {
						//执行业务提交
						this.dialogVisible = false
						var that = this
						axios.post(HTTP + "insetyaopinfenlei/", this.tableDatain).then(function(res) {
							if (res.data.code == 200) {
								that.$message('添加成功');
								that.initdata()
							}
						}).catch(err => {
							console.log(err)
						});

					},
					//查询
					initdata() {
						var that = this
						//ajax请求后端接口获取json数据
						axios.get(HTTP + "selectAllYaoPinFenLei/" + this.page).then(function(res) {
							// alert(JSON.stringify(res))
							that.tableData = res.data.data.pageInfo.list
							that.tocal = res.data.data.pageInfo.total
						}).catch(err => {
							console.log(err)
						});
					},
					handleCurrentChange(val) { //分页
						this.page = val //舍子当前页
						this.initdata() //发送ajax请求重新获取数据
					},
					onSubmitselect() {

					},
					open() {
						this.dialogVisible = true
					},
					// 修改药品分类
					onSubmitup() {
						//执行业务提交
						this.dialogVisibleup = false
						//根据id获取JSON对象
						var that = this
						axios.post(HTTP + "update3/", this.tableDataup).then(function(res) {
							if (res.data.code == 200) {
								that.$message('编辑成功');
								that.initdata()
							}
						}).catch(err => {
							console.log(err)
						});
					}
				},
				mounted() {
					this.initdata();
				}
			})
		</script>
	</body>
</html>